<template>
  <div class="password-container">
    <el-card class="password-card">
      <div slot="header" class="card-header">
        <span>修改密码</span>
      </div>

      <el-form
        ref="passwordForm"
        :model="passwordForm"
        :rules="rules"
        label-width="100px"
        class="password-form"
      >
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            :type="passwordVisible.old ? 'text' : 'password'"
            placeholder="请输入旧密码"
          >
            <i
              slot="suffix"
              class="el-icon-view password-eye"
              @click="passwordVisible.old = !passwordVisible.old"
            />
          </el-input>
        </el-form-item>

        <el-form-item label="新密码:" prop="newPasswordOne">
          <el-input
            v-model="passwordForm.newPasswordOne"
            :type="passwordVisible.new ? 'text' : 'password'"
            placeholder="请输入新密码，要求：8-16位，包含数字、字母、特殊字符"
          >
            <i
              slot="suffix"
              class="el-icon-view password-eye"
              @click="passwordVisible.new = !passwordVisible.new"
            />
          </el-input>
        </el-form-item>

        <el-form-item label="确认新密码:" prop="newPasswordTwo">
          <el-input
            v-model="passwordForm.newPasswordTwo"
            :type="passwordVisible.confirm ? 'text' : 'password'"
            placeholder="请输入新密码，要求：8-16位，包含数字、字母、特殊字符"
          >
            <i
              slot="suffix"
              class="el-icon-view password-eye"
              @click="passwordVisible.confirm = !passwordVisible.confirm"
            />
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="submit-btn"
            @click="submitForm"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { updatePasswordByIdApi } from '@/api/login'
import { mapGetters } from 'vuex'
export default {
  name: 'ChangePassword',
  data() {
    // 密码验证规则
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        const passwordRegex =
          /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,16}$/
        if (!passwordRegex.test(value)) {
          callback(new Error('密码必须包含数字、字母、特殊字符，长度8-16位'))
        }
        callback()
      }
    }

    // 确认密码验证
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.newPasswordOne) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }

    return {
      // 修改密码表单
      passwordForm: {
        id: '',
        oldPassword: '',
        newPasswordOne: '',
        newPasswordTwo: ''
      },
      // 添加密码可见性控制
      passwordVisible: {
        old: false,
        new: false,
        confirm: false
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPasswordOne: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        newPasswordTwo: [
          {
            required: true,
            trigger: 'blur',
            validator: validateConfirmPassword
          }
        ]
      }
    }
  },
  created() {
    this.passwordForm.id = this.userId
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    submitForm() {
      this.$refs.passwordForm.validate(async(valid) => {
        if (valid) {
          const res = await updatePasswordByIdApi(this.passwordForm)
          console.log(res)
          if (res.code === 1) {
            // 这里添加修改密码的接口调用
            this.$store.dispatch('user/logout')
            this.$router.push('/login')
            this.$message.info('密码修改成功,请重新登录')
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  background-color: #f0f2f5;
  padding: 20px;
}

.password-card {
  width: 500px;
}

.card-header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.password-form {
  padding: 20px 0;
}

.submit-btn {
  width: 100%;
}

/* 输入框样式 */
:deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 25px;
}

/* 添加密码可见性图标样式 */
.password-eye {
  cursor: pointer;
  color: #909399;
  font-size: 16px;
  margin-right: 8px;
}

.password-eye:hover {
  color: #409eff;
}

/* 确保输入框有足够空间显示图标 */
:deep(.el-input__inner) {
  padding-right: 35px;
}
</style>
